<template>
  <div class="mainCon">
    <div class="mainCon">
      <div class="containercontent">
        <div class="selectw100 seachTip">
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              检测项目分组
            </div>
            <div class="inlineblock verticalmiddle informationItem" style="width:calc(100% - 90px)">
              <el-select v-model="groupTypeValue" placeholder="请选择" size="mini" @change="readMethods(MethodsQuery,'search')" clearable>
                <el-option v-for="item in groupSelect.itemList" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              方法名称
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-input style="" v-model="searchName" size="mini" placeholder="方法名" @keyup.enter.native="readMethods(MethodsQuery,'search')" clearable></el-input>
            </div>
          </div>
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              方法状态
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-select size="mini" v-model="enableStatusValue" @change="readMethods(MethodsQuery,'search')" clearable>
                <el-option v-for="item in enableStatus" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              是否关联
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-select size="mini" v-model="isRalateDetec" @change="readMethods(MethodsQuery,'search')" placehloder = "是否已关联能力参数" clearable> 
                <el-option v-for="item in ralateDetecOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="inlineblock basicRightDistanceA searchIcon">
            <el-button size="mini" @click="readMethods(MethodsQuery,'search')">搜索</el-button>
            <el-button size="mini" @click="emptySearch">清空</el-button>
          </div>
        </div>
        <div class="separaterowTable">
          <div class="tableTittle">
            <div><span class="fontImpact">1</span><span>检测方法</span></div>
            <form id="fileForm1" style="display:none">
              <input type="file" name="file" id="file1" @change="upload1">
            </form>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addMethods" style="float:right" v-if="userOpernation.add.display">添加方法</el-button>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="editMethods({id:copeId},'copy')" v-if="userOpernation.add.display"
              style="float:right;margin-right:10px;">复制新增</el-button>
            <el-button type="primary"  size="mini" @click="importExcel" style="float:right;margin-right:6px;" v-if="userOpernation.upload.display">导入</el-button>
            <el-button type="primary"  size="mini" @click="downloadTem" style="float:right;margin-right:6px;" v-if="userOpernation.upload.display">下载模板</el-button>
            
          </div>
          <el-table :data="methodsTableDate" size="mini" highlight-current-row ref="methodsTable" class="tableCon selectTable" @select="selectRow">
            <el-table-column fixed type="selection" width="38px">
            </el-table-column>
            <el-table-column label="序号" min-width="50px">
              <template slot-scope="scope">
                {{scope.$index+(MethodsQuery.page - 1) * MethodsQuery.pageCount + 1}}
              </template>
            </el-table-column>

            <el-table-column property="name" label="方法名" min-width="200px" show-overflow-tooltip>
            </el-table-column>
            <el-table-column property="methodType" label="方法类型" min-width="150px" :formatter="methodTypeFormatter">
            </el-table-column>
            <el-table-column property="version" label="版本" width="80px">
            </el-table-column>
            <el-table-column property="status" label="状态" width="80px" :formatter="formatter">
            </el-table-column>
            <el-table-column label="操作" min-width="120px" v-if="somePageOpera || isShowOperate">
              <template slot-scope="scope">
                <!--1 编辑 2 详情 3 启用 4停用 5删除-->
                <el-button v-if="showOperate(4,scope.row.status) && userOpernation.disable.display" type="text" size="mini" @click="isStart(scope.row)">停用</el-button>
                <el-button v-if="showOperate(3,scope.row.status) && userOpernation.enable.display" type="text" size="mini" @click="isStart(scope.row)">启用</el-button>
                <el-button v-if="userOpernation.update.display && showOperate(1,scope.row.status)" @click="editMethods(scope.row,'edit')"
                  type="text" size="mini" :disabled="scope.row.source !='' && scope.row.source != undefined ">编辑</el-button>
                <el-button @click="editMethods(scope.row,'edit')" type="text" size="mini" v-if="(userOpernation.openUpdate.display || userOpernation.version.display) && showOperate(10,scope.row.status)"
                 >编辑</el-button>
                <el-button @click="editMethods(scope.row,'review')" type="text" size="mini" v-if="scope.row.isApprove">审核</el-button>
                <el-button @click="editMethods(scope.row,'look')" type="text" size="mini" v-if="userOpernation.select.display && showOperate(2,scope.row.status)">详情</el-button>
                <el-button @click="delMethods(scope.row)" type="text" size="mini" v-if="userOpernation.delete.display && showOperate(5,scope.row.status)"
                  :disabled="scope.row.source !='' && scope.row.source != undefined ">删除</el-button>
                <!--<el-button v-if="scope.row.status=='1' && userOpernation.disable.display" type="text" size="mini" @click="isStart(scope.row)">停用</el-button>
                <el-button v-if="scope.row.status=='0' && userOpernation.enable.display" type="text" size="mini" @click="isStart(scope.row)">启用</el-button>
                <el-button v-if="userOpernation.update.display" @click="editMethods(scope.row,'edit')" type="text" size="mini" :disabled="scope.row.source !='' && scope.row.source != undefined ">编辑</el-button>
                <el-button @click="editMethods(scope.row,'review')" type="text" size="mini" v-if="scope.row.isApprove">审核</el-button>
                <el-button @click="editMethods(scope.row,'look')" type="text" size="mini" v-if="userOpernation.select.display">详情</el-button>
                <el-button @click="delMethods(scope.row)" type="text" size="mini" v-if = "userOpernation.delete.display" :disabled="scope.row.source !='' && scope.row.source != undefined ">删除</el-button>-->
              </template>
            </el-table-column>
          </el-table>
          <div class="block changepages">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="MethodsQuery.page" :page-sizes="[20,30,40]"
              :page-size="MethodsQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
            </el-pagination>
          </div>
        </div>
        <div>
          <!--  <ability></ability> -->
        </div>
      </div>
    </div>
    <methods-add :addVisible.sync="popupShow" :newOrEdit.sync="newOrEdit" :canEdit.sync="canEdit" :status="methodEditStatus"
      :methodsDetail='methodsDetail'></methods-add>

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  const methodsAdd = () => import('./children/methodsAdd.vue');

  export default {
    data() {
      let that = this;
      return {
        MethodsQuery: {
          page: 1, //第几页
          pageCount: 20, //页面得记录条数，
        },
        methodsTableDate: [],
        groupTypeValue: '',
        enableStatusValue: '',
        isRalateDetec:"",
        ralateDetecOption:[{
          label:"是",
          value:1,
        },{
          label:"否",
          value:0,
        }],
        searchName: '',
        rowNumber: 0,
        newOrEdit: 'new',
        methodsDetail: {}, //查看详情
        popupShow: false,
        canEdit: true,
        methodEditStatus: '',
        isShowOperate: true, //根据审核按钮判断是都显示操作栏
        somePageOpera: true, //根据操作栏的增删改查是否显示操作栏
        selectOldRow: null,
        copeId: '',
      }
    },
    computed: {
      ...mapState(['daibanItemShow','enableStatus','groupSelect', 'methodTypeSelect', 'monitorPointBigType', 'sampleType', 'methodType', 'analysisItemTableDate', 'daibanItem']),
    },
    props: ['userOpernation'],
    components: {
      methodsAdd,
    },
    created() {
			if(this.daibanItemShow){
					this.editMethods(this.daibanItem, 'review')
					this.$store.commit('passDaibanItemShow', false)
			}
    },
    mounted() {
      this.$store.dispatch('dogetDictionary')
      this.readMethods(this.MethodsQuery)
      this.somePageOpera = this.util.operate({ delete: this.userOpernation.delete, update: this.userOpernation.update, disable: this.userOpernation.disable, enable: this.userOpernation.enable, select: this.userOpernation.select })

    },
    beforeDestroy() {
      console.group('离开 检测方法');
      this.$store.commit('passItem', null)
    },
    watch: {
      daibanItem(newer, older) {
       if(this.daibanItemShow){
       		this.editMethods(this.daibanItem, 'review')
       		this.$store.commit('passDaibanItemShow', false)
       }
      },
      MethodsQuery: {
        handler(val, oldVal) {
          this.readMethods(this.MethodsQuery)
        },
        deep: true
      },
    },
    methods: {
      showOperate(oper, status) {
        if (oper == 1) { //编辑
          if (status == 2 || status == 4) { //启用，草稿状态下显示编辑按钮
            return true;
          }
        }
        if (oper == 10) { //编辑
          if (status == 1) { //编辑
            return true;
          }
        }
        if (oper == 2) { //详情 按钮都显示
          return true;
        }
        if (oper == 3) { //启用 
          if (status == 0) { //停用状态显示启用按钮
            return true;
          }
        }

        if (oper == 4) { //停用
          if (status == 1) { //启用状态显示停用按钮
            return true;
          }
        }
        if (oper == 5) { //删除
          if (status != 3) { //待审核  除了待审核 都显示删除按钮
            return true;
          }
        }
      },
      emptySearch() {
        this.searchName = '';
        this.enableStatusValue = '';
        this.groupTypeValue = '';
        this.isRalateDetec = "";
        this.readMethods(this.MethodsQuery, 'search')
      },
      methodTypeFormatter(row, column, cellValue, index) {
        return this.util.codeChangeName({ cellValue: cellValue, list: this.methodTypeSelect.itemList })

      },
      formatter(row, column, cellValue, index) {
        return this.util.changeStatus({ cellValue: cellValue, list: this.enableStatus })
      },
      handleCurrentChange: function (val) {
        this.MethodsQuery.page = val;
      },
      handleSizeChange: function (val) {
        this.MethodsQuery.pageCount = val;
      },
      readMethods(parp, search) {
        var params = {
          name: this.searchName,
          status: this.enableStatusValue,
          group: this.groupTypeValue,
          isRalateDetec:this.isRalateDetec,
        }
        if (search != undefined) {
          this.MethodsQuery.page = 1;
          params.page = 1;
          params.pageCount = parp.pageCount;
        } else {
          params.page = parp.page;
          params.pageCount = parp.pageCount;
        }

        this.$http({
          method: 'post',
          apiUrl: '/technology/readMethodList.htm',
          params: params,
          isJson: false,
        }).then(res => {
          if (res.code === 0) {
            res.data.forEach(function (item) {
              item.check = false;
            })
            this.methodsTableDate = res.data;
            this.isShowOperate = this.util.showOpreta({ data: res.data })
            if (!res.pageinfo) {
              this.rowNumber = 0;
            } else if (res.pageinfo && !res.pageinfo.rowNumber) {
              this.rowNumber = 0;
            } else {
              this.rowNumber = res.pageinfo.rowNumber;
            }
          }

        })
      },

      editMethods: function (row, newOrEdit) {
        this.newOrEdit = newOrEdit;

        if (newOrEdit == 'edit' || newOrEdit == 'copy') {
          this.canEdit = true;
        } else {
          this.canEdit = false;
        }
        if ((row.id == '' || row.id == null) && newOrEdit == 'copy') {
          this.$notify({
            title: "警告",
            type: 'info',
            message: '请先选择一个检测方法'
          });
        } else {
          this.$http({
            method: 'post',
            apiUrl: '/technology/readMethod.htm',
            params: { id: row.id },
            isJson: false,
          }).then(res => {
            if (res.code === 0) {
              this.methodsDetail = res.data;
              this.popupShow = true;
            }

          })
        }
      },
      // 复制新增 先选中
      selectRow(selection, row) {
        selection = this.$refs.methodsTable.selection
        if (selection.length > 1) {
            selection.shift()
        }
        if(selection.length != 0){
          this.copeId = row.id
        }else{
          this.copeId = '';
        }
        
      },
      //  是否重加载
      reLoad() {
        this.reload = false;
        this.$nextTick(() => {
          this.reload = true;
        })
      },
      //启用或者停用方法
      isStart(row) {
        var msg = row.status == 0 ? "启用" : "停用";
        this.$confirm("是否" + msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            method: 'post',
            apiUrl: '/technology/updMethodStatus.htm',
            params: {
              id: row.id,
              status: row.status == 0 ? 1 : 0,
            },
            isJson: false,
          }).then(res => {
            if (res.code === 0) {
              this.readMethods(this.MethodsQuery)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消' + msg
          });
        });

      },
      // 添加方法
      addMethods() {
        this.popupShow = true;
        this.newOrEdit = 'new';
        this.canEdit = true;
      },
      //删除方法
      delMethods(row) {
        this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            method: 'post',
            apiUrl: '/technology/deleteMethod.htm',
            params: {
              id: row.id,
            },
            isJson: false,
          }).then(res => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.readMethods(this.MethodsQuery)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      importExcel() { // 模拟file的点击事件
        document.getElementById("file1").click()
      },
      // 导入文件
      upload1(event) {
        var files = document.getElementById('file1').files[0];
        var formData = new FormData();
        formData.append('file', files)
        this.$axios({
          method: 'post',
          url: '/technology/importMethodData.htm',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data',
            'token':sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined,
          }
        }).then(res => {
          event.target.value= "";
          if (res.data.code == 0) {
            this.$notify({
              title: '消息',
              message: res.data.description,
              type: 'success'
            })
           this.readMethods(this.MethodsQuery)
          } else {
            this.$notify({
              title: '消息',
              type: 'warning',
              message: res.data.description,
            })
          }

        })
      },
      // 
      downloadTem(){
        var url = "/download/template.htm";
        var template = "sysManage";
        var module = "method";
        
        console.log(222,module)
        var name = "methodData"
        let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
        window.open(process.env.baseUrl + url + '?template=' + template + '&module=' + module + "&name=" + name + "&token=" + token)     
      },
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .infoitem {
    line-height: 28px;
    width: calc((100% - 200px)/4);
  }


  .separaterow {
    margin-top: 10px;
  }

  .informationItem {
    width: calc(100% - 70px);
    float: right;
  }
</style>
<style>
  .selectTable .el-table__header thead th:nth-of-type(1) .cell {
    display: none;
  }
</style>